<!--
 * @Author: lijilong
 * @Date: 2024-06-14 12:20:51
 * @LastEditors: lijilong lijilong@thwater.com
 * @LastEditTime: 2024-09-09 15:27:01
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<route lang="json5">
	{
	layout: 'default',
	style: {
	navigationBarTitleText: '实验方案详情',
	enablePullDownRefresh: false,
	navigationStyle: 'custom',
	},
	}
</route>

<template>
    <page-meta :root-font-size="setting.rootFontSize"></page-meta>
    <view style="display: flex; height: 100vh; flex-direction: column; background-color: #f2f2f1">
        <view style="position: sticky; top: 0; z-index: 9999">
            <wd-navbar title="实验方案" :bordered="false" safeAreaInsetTop>
                <template #left>
                    <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
                </template>
            </wd-navbar>
        </view>
        <view style="flex: 1; overflow-y: auto">
            <th-card title="任务单信息">
                <th-form>
                    <th-form-item label="项目名称" v-if="form.petitionName">
                        <text class="text">{{ form.petitionName }}</text>
                    </th-form-item>
                    <th-form-item label="任务编码">
                        <text class="text">{{ form.itemCode }}</text>
                    </th-form-item>

                    <th-form-item label="合成路径">
                        <text class="text">{{ technologyName }}</text>
                    </th-form-item>
                    <th-form-item label="需求产品名称" v-if="form.compoundFlag == 1">
                        <text v-text="form.rdDemandEntityInvName" disabled></text>
                    </th-form-item>
                    <th-form-item label="产品名称" v-else>
                        <text v-text="form.invName" disabled></text>
                    </th-form-item>
                    <th-form-item label="需求产品规格" v-if="form.compoundFlag == 1">
                        <text v-text="form.rdDemandEntityInvStd" disabled></text>
                    </th-form-item>
                    <th-form-item label="产品规格" v-else>
                        <text v-text="form.invStd" disabled></text>
                    </th-form-item>
                    <th-form-item label="任务负责人">
                        <view>
                            <text class="text" v-for="(item, index) in form.projectHeadName" :key="index">
                                {{ index > 0 ? '，' : '' }}{{ item.userName }}
                            </text>
                        </view>
                        <!-- <text class="text">{{ form.projectHeadName }}</text> -->
                    </th-form-item>

                    <th-form-item label="任务成员">
                        <view>
                            <text class="text" v-for="(item, index) in form.rdProjectUserEntity" :key="index">
                                {{ index > 0 ? '，' : '' }}{{ item.userName }}
                            </text>
                        </view>

                    </th-form-item>
                    <th-form-item label="需求描述">
                        <text class="text">{{ form.description }}</text>
                    </th-form-item>
                    <th-form-item label="反应方程式">
                        <text class="text">
                            <image class="craft-row-img" :src="form.equation" mode="scaleToFill"
                                @click="previewFileHandle(form.equation)" />
                        </text>
                    </th-form-item>
                    <th-form-item label="研发方案">
                        <wd-textarea :no-border="true" auto-height v-model="form.rdPlan" placeholder=" " disabled
                            style="width: 100%" class="diabledStyle"></wd-textarea>
                    </th-form-item>

                </th-form>
            </th-card>

            <th-card title="需求指标" v-if="form.rdDemandStandardEntity && form.rdDemandStandardEntity.length">
                <view class="table-container">
                    <table class="analysis-table">
                        <tbody>
                            <tr>
                                <th>检验指标名称</th>
                                <th>U8指标</th>
                                <th>客户指标</th>
                                <th>描述</th>
                            </tr>
                            <tr align="center" v-for="(  item, index  ) in form.rdDemandStandardEntity" :key="index">
                                <td>{{ item.standardName }}</td>
                                <td>{{ item.standardValue }}</td>
                                <td>{{ item.standardValuePm }}</td>
                                <td>{{ item.standardDesc }}</td>
                            </tr>
                        </tbody>
                    </table>
                </view>
            </th-card>
            <th-card title="方案信息">
                <th-form>
                    <th-form-item label="产品名称" v-if="form.compoundFlag == 1">
                        <text class="text" v-text="form.invName"></text>
                    </th-form-item>
                    <th-form-item label="产品规格" v-if="form.compoundFlag == 1">
                        <text class="text" v-text="form.invStd"></text>
                    </th-form-item>
                    <th-form-item label="实验目的">
                        <text class="text" v-text="form.purpose"></text>
                    </th-form-item>
                </th-form>
                <view>
                    <view class="viewLabel"><text>反应装置</text></view>
                    <view class="table-container">
                        <table class="analysis-table">
                            <tbody>
                                <tr>
                                    <th>反应装置</th>
                                    <th>用料规格</th>
                                    <th>最大搅拌量</th>
                                    <th>最小搅拌量</th>
                                    <th>单位</th>
                                </tr>
                                <tr align="center" v-for="(  item, index  ) in form.deviceList" :key="index">
                                    <td>{{ item.name }}</td>
                                    <td>{{ item.capacity }}</td>
                                    <td>{{ item.maxValue }}</td>
                                    <td>{{ item.minValue }}</td>
                                    <td>{{ item.unit }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </view>
                </view>
            </th-card>
            <th-card title="用料及配比">
                <view class="table-container">
                    <table class="analysis-table">
                        <tbody>
                            <tr>
                                <th style="width: 320rpx; min-width: 9.5rem">用料名称</th>
                                <th style="width: 280rpx; min-width: 280rpx">用料规格</th>
                                <th style="width: 280rpx; min-width: 280rpx">密度</th>
                                <th style="width: 280rpx; min-width: 280rpx">占比（%）</th>
                                <th style="width: 280rpx; min-width: 280rpx" v-if="form.compoundFlag != 1">范围</th>
                                <th style="width: 280rpx; min-width: 280rpx">计划用量</th>
                                <th style="width: 320rpx; min-width: 9.5rem">单位</th>
                            </tr>
                            <tr align="center" v-for="(  item, index  ) in materialList" :key="index">
                                <td>{{ item.invName }}</td>
                                <td>{{ item.invStd }}</td>
                                <td>{{ item.density }}</td>
                                <td>{{ item.proportion }}</td>
                                <td v-if="form.compoundFlag != 1">
                                    <text>{{ minPlanDosage(item.density, item.proportion, form.deviceList &&
                                        form.deviceList[0].minValue) }}</text>
                                    ~
                                    <text>{{ maxPlanDosage(item.density, item.proportion, form.deviceList &&
                                        form.deviceList[0].maxValue) }}</text>
                                </td>
                                <td>{{ item.planDosage }}</td>
                                <td>{{ item.unit }}</td>
                            </tr>
                            <tr align="center" v-if="form.compoundFlag == 1">
                                <td>合计</td>
                                <td></td>
                                <td></td>
                                <td>{{ totalProportion(materialList) }}</td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </view>
            </th-card>
            <th-card title="实验步骤">
                <ExperimnetStepPreview :materialList="form.processList" mode="scheme" />
                <!-- <wd-img :src="form.processUrl" @click="preview(form.processUrl)" v-if="form.processUrl" width="98vw"
				height="50vh" mode="widthFix" />
			<text class="text" v-else>暂无数据</text> -->
            </th-card>
            <th-card title="附件" v-if="form.compoundFlag == 1">
                <view class="table-container">
                    <table class="analysis-table">
                        <tbody>
                            <tr>
                                <th>附件名称</th>
                                <th>附件描述</th>
                            </tr>
                            <block v-if="fileList.length">
                                <tr align="center" v-for="(item, index) in fileList" :key="index"
                                    @click="previewFileHandle(item.fileUrl)">
                                    <td>{{ item.fileName }}</td>
                                    <td>{{ item.remark }}</td>
                                </tr>
                            </block>
                            <block v-else>
                                <tr align="center">
                                    <td :colspan="2">暂无数据</td>
                                </tr>
                            </block>
                        </tbody>
                    </table>
                </view>
            </th-card>
            <th-card title="审核信息" v-if="[1, 2, 3].includes(form.status)">
                <view class="row-list">
                    <view class="row" v-if="form.id && form.flowTaskId">
                        <!-- <view class="label">审核意见</view> -->
                        <view class="value">
                            <view class="mb2 mt2">
                                <h5>审核意见</h5>
                            </view>
                            <wd-textarea type="textarea" v-model="comment" rows="6" placeholder="请输入审核意见"
                                style="border: 1px solid #f7f7f7"></wd-textarea>
                        </view>
                    </view>
                    <view>
                        <flowTable ref="flowDetailsTableRef" :processInstanceId="form.instanceId"></flowTable>
                    </view>
                </view>
            </th-card>
        </view>
        <view class="flow-btn-fixed" v-if="form.taskAllStatus == '1'">
            <view class="btn_group" style="width: 100%">
                <view class="btn primary" @click="onRevokeShow()" v-if="form.id && form.status == 1 && checkPremiss('experiment_experimentScheme_revoke')">
                    <image src="../../../../static/rovoke.png" class="btn-icon"></image>
                    撤回
                </view>
                <view class="btn danger" @click="oncomplete(1)" v-if="form.id && form.flowTaskId && form.status == 1 && checkPremiss('experiment_experimentScheme_complete')">
                    <image src="../../../../static/reject.png" class="btn-icon"></image>
                    拒绝
                </view>
                <view class="btn primary" @click="oncomplete(0)" v-if="form.id && form.flowTaskId && form.status == 1 && checkPremiss('experiment_experimentScheme_complete')">
                    <image src="../../../../static/tongyi.png" class="btn-icon"></image>
                    同意
                </view>
                <view class="btn primary" @click="onReviveShow()"
                    v-if="form.id && [2].includes(form.status) && form.taskAllStatus == 1 && checkPremiss('experiment_experimentScheme_abandon')">
                    <image src="../../../../static/rovoke1.png" class="btn-icon"></image>
                    弃审
                </view>
            </view>
        </view>

        <wd-popup v-model="revokeShow" position="bottom" @close="handleClose">
            <view style="display: flex; flex-direction: column; height: 100%">
                <wd-textarea v-model="revokeComment" placeholder="请填写撤回原因" no-border prop="revokeComment"
                    class="reovke-textarea" />
                <view class="flow-btn-fixed">
                    <view class="btn_group" style="width: 100%">
                        <view class="btn danger" @click="handleClose">取消</view>
                        <view class="btn primary" @click="onRevoke">撤回</view>
                    </view>
                </view>
            </view>
        </wd-popup>
        <wd-popup v-model="reviveShow" position="bottom" @close="handleClose">
            <view style="display: flex; flex-direction: column; height: 100%">
                <wd-textarea v-model="reviveComment" placeholder="请填写弃审原因" no-border prop="reviveComment"
                    class="reovke-textarea" />
                <view class="flow-btn-fixed">
                    <view class="btn_group" style="width: 100%">
                        <view class="btn danger" @click="handleClose">取消</view>
                        <view class="btn primary" @click="onCancelApprover">弃审</view>
                    </view>
                </view>
            </view>
        </wd-popup>
    </view>
</template>

<script lang="ts" setup>
import { useSetting } from '@/stores/setting';
import { getObj, complete, revokeProcess, queryCraft, abandon } from '@/service/pm-experiment';
import { useUserStore } from '@/stores/user';
import { getObj as getProjectObj } from '@/service/pm-task';
import { maxPlanDosage, minPlanDosage, totalProportion } from '../utils/index'
import ExperimnetStepPreview from '../components/ExperimnetStepPreview.vue'
const setting = useSetting();
const userStore = useUserStore();
const showSign = ref(false);
const signature = ref('');
const userInfo = ref({});
const isChiefEngineer = ref('');
const isDeputyChiefEngineer = ref('');
const showAction = ref(false);

// 提交表单数据
const form = reactive({
    id: null,
    technologyId: null,
    deviceList: [],
    processList: []
});

// 用料配比
const materialList = ref([])

const technologyName = ref('')

/**
 * 工艺路线列表
 */
const craftList = ref([]);

const fileList = ref([{
    fileName: '',
    fileUrl: ''
}])

watch(
    () => craftList.value,
    (val) => {
        const technology = val && val.find(item => item.id == form.technologyId)
        technologyName.value = technology ? technology.craftName : '';
    },
    {
        immediate: true,
        deep: true,
    }
)
const userInfos = userStore.userInfos;
const cusPerson = userInfos.user.username;

const checkPremiss = (k) => {
    return userInfos.authBtnList.some((v: string) => v === k);
};

const flowDetailsTableRef = ref();
const init = (params) => {
    uni.$off('pm-requirement-sign');
    uni.showLoading();
    getObj(params)
        .then((res) => {
            console.log('res', res);
            res.data.deviceList = res.data.equipmentList || [];
            Object.assign(form, res.data);
            materialList.value =
                res.data.dosageList &&
                res.data.dosageList.map((item) => {
                    item.planDosage = item.dosage || '';
                    return item;
                });

            form.processList = res.data.processList || []
            if (res.data.taskCode && res.data.demandCode) {
                getProjectInfo({ id: form.taskId, taskCode: form.taskCode, demandCode: form.demandCode });
            }
            const user = res.data.userList.find(item => item.userCode == cusPerson)
            showSign.value = user ? true : false;

            fileList.value = [{
                fileName: res.data.fileName || "",
                fileUrl: res.data.fileUrl || "",
            }]

            nextTick(() => {
                flowDetailsTableRef.value?.getFlowDetails();

            })
        })
        .finally(() => {
            uni.stopPullDownRefresh();
            uni.hideLoading();
        });
    // checkPost();
};

const getProjectInfo = function (params) {
    getProjectObj(params).then((res) => {
        if (res.code === 0) {
            form.projectHeadName = res.data.rdProjectUserEntity.filter(item => item.userType == 2) || [];
            // form.technologyHeadName = res.data.rdProjectUserEntity.filter(item => item.userType == 2) || [];
            form.rdProjectUserEntity = res.data.rdProjectUserEntity.filter(item => item.userType == 0) || [];
            form.rdDemandStandardEntity = res.data.rdDemandStandardEntity || [];
            form.taskAllStatus = res.data.taskAllStatus
            form.petitionName = res.data.petitionName
            if (form.compoundFlag == 1) {
                form.rdDemandEntityInvStd = res.data.invStd || res.data.rdDemandEntity.invStd || '';
                form.rdDemandEntityInvName = res.data.invName || res.data.rdDemandEntity.invName || '';
            }

            getCraft(res.data.id)
            // craftList.value = res.data.rdCraftEntity.filter((item) => item.isUse) || [];
            // form.projectHeadName = res.data.projectHeadName;
            // form.technologyHead = res.data.technologyHead;
            // form.technologyHeadName = res.data.technologyHeadName;
            // form.rdProjectUserEntity = res.data.rdProjectUserEntity;

            // checkPost();
        }
    });
};

const getCraft = (taskId) => {
    queryCraft(taskId).then(res => {
        craftList.value = res.data.filter((item) => item.isUse && !item.delFlag) || [];
    })
}


onLoad((options) => {
    if (options) {
        const id = options.id;
        init({
            id: id,
        });
    }

});
onPullDownRefresh(() => {
    init({
        id: form.id,
        taskCode: form.taskCode,
        demandCode: form.demandCode,
    });
});

const goBack = () => {
    uni.navigateBack();
};

const previewFileHandle = (file) => {
    uni.navigateTo({
        url: '/pages/pm/preview-online?url=' + file,
    });
};


// 审核信息
const comment = ref('');
const oncomplete = (type) => {
    if (type == '1' && !comment.value) {
        uni.showToast({
            title: '请填写审核意见',
            icon: 'none',
            mask: true,
        });
        return;
    }

    const params = {
        flowTaskId: form.flowTaskId,
        comment: comment.value,
        id: form.id,
        approve: type == 0 ? true : false,
    };
    uni.showLoading({
        mask: true,
    });
    complete(params, form.id)
        .then((res) => {
            if (res.code == 0) {
                uni.showToast({
                    title: '单据审核成功',
                    icon: 'none',
                    mask: true,
                });
                init({
                    id: form.id,
                });
            } else {
                uni.showToast({
                    mask: true,
                    title: `单据审核失败，失败原因：${res.msg}`,
                    icon: 'none',
                });
            }
        })
        .finally(() => {
            uni.hideLoading();
        });
};



// 撤回
const revokeComment = ref('');
const revokeShow = ref(false);

const onRevokeShow = () => {
    revokeShow.value = true;
};
const handleClose = () => {
    revokeShow.value = false;
    reviveShow.value = false;
};
const onRevoke = () => {
    uni.showModal({
        title: '提示',
        content: '是否撤回该单据',
        showCancel: true,
        success: ({ confirm, cancel }) => {
            if (cancel) {
                return;
            }
            uni.showLoading({
                mask: true,
            });
            revokeProcess({
                id: form.id,
                instanceId: form.instanceId,
                comment: revokeComment.value,
            })
                .then((res) => {
                    if (res.code == 0) {
                        uni.showToast({
                            mask: true,
                            title: `单据${form.schemeNo}撤回成功`,
                            icon: 'none',
                        });
                        handleClose();
                        init({ id: form.id });
                    } else {
                        uni.showToast({
                            mask: true,
                            title: `单据${form.schemeNo}撤回失败，失败原因：${res.msg}`,
                            icon: 'none',
                        });
                    }
                })
                .finally(() => {
                    uni.hideLoading();
                });
        },
    });
};



// 弃审
const reviveComment = ref('');
const reviveShow = ref(false);

const onReviveShow = () => {
    reviveShow.value = true;
};

const onCancelApprover = () => {
    uni.showModal({
        title: '提示',
        content: '是否弃审该单据',
        showCancel: true,
        success: ({ confirm, cancel }) => {
            if (cancel) {
                return;
            }
            uni.showLoading({
                mask: true,
            });
            abandon({
                id: form.id,
                comment: revokeComment.value,
            })
                .then((res) => {
                    if (res.code == 0) {
                        uni.showToast({
                            mask: true,
                            title: `单据${form.schemeNo}弃审成功`,
                            icon: 'none',
                        });
                        handleClose();
                        init({ id: form.id });
                        // nextTick(() => {
                        //   flowDetailsTableRef.value.getFlowDetails();
                        // });
                    } else {
                        uni.showToast({
                            mask: true,
                            title: `单据${form.schemeNo}弃审失败，失败原因：${res.msg}`,
                            icon: 'none',
                        });
                    }
                })
                .finally(() => {
                    uni.hideLoading();
                });
        },
    });
};


</script>

<style lang="scss" scoped>
@import "../components/table.scss";

.block .content {
    padding: 0 !important;
}

.card-detail {
    padding: 0 !important;
}

.wd-cell {
    padding-left: 0 !important;
}

.wd-card__title {
    border-left: 4px solid #2e5cf6 !important;
}

.pm-table {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;

    .pm-title {
        box-sizing: border-box;
        padding-left: 20rpx;
        margin: 40rpx 0;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        border-left: 8rpx solid #2e5cf6;
        border-radius: 4rpx;
    }

    .pm-row {
        display: flex;
        min-height: 60rpx;
        border-bottom: 1px solid #f6f0f0;

        .pm-label {
            display: flex;
            align-items: center;
            width: 20%;
            font-size: 26rpx;
            color: #979494;
        }

        .pm-value {
            display: flex;
            flex: 1;
            align-items: center;
            font-size: 26rpx;
            color: #333;
        }
    }
}

.sign-main {
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // width: 100%;
    // margin: 20rpx 0;
    position: fixed;
    right: 0rpx;
    bottom: 40rpx;
    width: 160rpx;
    height: 80rpx;
    line-height: 80rpx;
    color: white;
    text-align: center;
    background-color: rgb(77 128 240);

    // border-radius: 50%;
    border-top-left-radius: 40rpx;
    border-bottom-left-radius: 40rpx;
}

:deep(.label) {
    width: 160rpx !important;
}

.viewTable {
    flex: auto;

    :deep() {
        .content {
            width: calc(100% - 80px);
        }
    }
}

.diabledStyle {
    :deep() {
        .wd-textarea__inner {
            color: #262626 !important;
        }
    }
}

:deep() {
    .wd-textarea {
        &::after {
            display: none !important;
        }
    }
}

.result-tag {
    padding: 6rpx 14rpx;
    margin: 2rpx 0;
    font-size: 24rpx;
    color: white;
    background-color: #87d068;
    border-radius: 4rpx;
}

.sign-main-show {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .sign-main-show-title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80rpx;
        margin-bottom: 20rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #818181;
        border-bottom: 1px solid #e3e3e3;
    }

    .sign-main-show-line {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90%;
        padding: 20rpx;
        margin-bottom: 20rpx;
        border: 4rpx solid #d0dbff;
        border-radius: 10rpx;
    }

    .sign-main-show-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80rpx;
        border-top: 1px solid #e3e3e3;
    }
}

.info-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.info-list-main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10rpx;
    margin: 10rpx 0;
    border: 1px solid #e3e3e3;
    border-radius: 8rpx;

    .info-list-row {
        display: flex;
        width: 100%;

        .info-list-label {
            width: 150rpx;
            font-size: 28rpx;
            color: #808080;
        }

        .info-list-value {
            flex: 1;
            width: 0;
        }
    }
}

.viewLabel {
    position: relative;
    flex: 1;
    min-width: 16.875rem;
    padding: 0.5625rem 0;
    margin: 0 0.75rem;
    flex-shrink: 0;
    width: 3.75rem;
    font-size: 0.8125rem;
    line-height: 1;
    color: #666;
}

.craft-row-img {
    height: 80rpx;
    width: 80rpx;
}

.flow-btn-fixed {
    width: 100%;
    background-color: white;
    border-top: 1px solid #f2f2f1;
}

.btn_group {
    display: flex;
    justify-content: space-between;

    // margin: 0rpx 0 20rpx;
    // border-bottom: 1px solid #f2f2f1;

    .btn {
        display: flex;

        // width: 49%;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        // height: 40px;
        min-height: 40px;
        padding: 10rpx 0;
        font-size: 24rpx;
        color: black;

        // background-color: white !important;
        background-color: #dbecff !important;
        border-left: 1px solid #f7f7f7;
        border-radius: 0 !important;

        // color: white;
        border-radius: 6rpx;

        .btn-icon {
            width: 40rpx;
            height: 40rpx;
            margin-bottom: 8rpx;
        }
    }

    .danger {
        background-color: #f56c6c;
    }

    .primary {
        background-color: #409eff;
    }
}
</style>